<template>
    <div class="lnLayout" >
        <div class="form">
            <div class="title">
                <span>登录</span>
                <span>
                    还没有账号?
                    <router-link to="addUser" class="addA">前往注册</router-link>
                </span>
            </div>
            <div class="input">
                <input placeholder="手机号" v-model="formInfo.uname" />
            </div>
            <div class="input">
                <input placeholder="密码" v-model="formInfo.password" type="password"/>
            </div>
            <div class="Code">
                <el-switch
                    v-model="isSave"
                    class="mt-2"
                    inline-prompt
                    :active-icon="Check"
                    :inactive-icon="Close"
                />
                <span>记住我,30天免登录</span>
            </div>
            <button class="button" @click="goLogin" :disabled="isDisabled">{{ isDisabled?'请完成输入框内容':'登录'}}</button>
            
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { reactive, computed, ref } from 'vue'
import { post } from '@/http/axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/store/userInfoState'
import { setCookies } from '@/utils/cookies'
import { setToken } from '@/utils/local'

type cookieType = {
    code:string
    token:string
    name:number
    status:string
}
const formInfo = reactive({
    uname:null,
    password:null,
})
const isSave = ref<boolean>(false)
const router = useRouter()
const store = useUserInfoStore()
function goLogin() {
    post('/login',
    {
        username:formInfo.uname,
        password:formInfo.password
    }).then(res => {
        console.log('登录',res.result);
        
        store.token = res.result.token
        return saveCookies(res.result)
    }).catch(err =>{
        ElMessage.error('登陆失败') 
    })
}
function saveCookies(key:cookieType) {
    if (isSave.value) {
        setToken('token',key.token)
    }
    let cookieArr = [] as Array<string>
    Object.keys(key).forEach(el => {
        if (el !== 'token') cookieArr.push(el + '=' + key[el])
    })
    setCookies(cookieArr)
    return router.push('/')
}
const isDisabled = computed(() => {
    let flag = false
    Object.keys(formInfo).forEach(el => {
        if (!formInfo[el]) {
            flag = true
        }
    })
    return flag
})
</script>

<style lang="scss" scoped>
.lnLayout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/loginBack.jpg');
    background-size: cover;
    @include flexRowCenter;
}
.form{
    position: relative;
    width: 40%;
    min-width: 500px;
    padding: 40px 0;
    height: 40%;
    background: rgba(65, 97, 142, 0.403);
    backdrop-filter: blur(3px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.2),
                -5px -5px 10px rgb(0, 0, 0, 0.2),
                -5px 5px 10px rgb(0, 0, 0, 0.2),
                5px -5px 10px rgb(0, 0, 0, 0.2);
}
.title{
    width: 100%;
    padding: 0 10%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: white;
    font-size: 25px;
    font-weight: 600;
    & span:nth-child(2) {
        font-weight: 500;
        color: rgb(8, 7, 7);
        font-size: 14px;
    }
}
.input{
    position: relative;
    width: 100%;
    height: 35px;
    @include flexColumnCenter;
    opacity: 0.8;
    & input:nth-child(1){
        outline: none;
        height: 35px;
        width: 80%;
        border: none;
        border-radius: 4px;
    }
}
.Code{
    width: 80%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 10px;
    color: white;
}
.button{
    outline: none;
    width: 200px;
    height: 40px;
    opacity: 0.8;
    border-radius: 4px;
    background: #1B9CFC;
    color: white;
    font-weight: 600;
    border: none;
    &:disabled{
        background: #8395a7;
    }
    &:disabled:hover{
        background: #8395a7;
    }
    &:hover{
        border: none;
        background: #45aaf2;
    }
}

.addA{
    color: white;
    font-size: 14px;
    &:hover{
        color: #409EFF;
    }
}
</style>